<div class="registration-form row g-3 card-body" [formGroup]="registrationFormGroup">
    <div class="card-title fw-bold">
        {{registrationFormTitle}}
    </div>
    <div class="col-md-6">
        <label>First Name</label>
        <input class="form-control" type="text" formControlName="firstName">
        <div class="error-msg" *ngIf="registrationFormGroup.get('firstName')?.touched">
            <div class="required" *ngIf="registrationFormGroup.get('firstName')?.hasError('required')">
                First Name is Required
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <label>Last Name</label>
        <input class="form-control" type="text" formControlName="lastName">
        <div class="error-msg" *ngIf="registrationFormGroup.get('lastName')?.touched">
            <div class="required" *ngIf="registrationFormGroup.get('lastName')?.hasError('required')">
                Last Name is Required
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <label>Email</label>
        <input class="form-control" type="text" formControlName="email">
        <div class="error-msg" *ngIf="registrationFormGroup.get('email')?.touched">
            <div class="email-error" *ngIf="registrationFormGroup.get('email')?.hasError('email')">
                Enter a valid Email
            </div>
            <div class="required" *ngIf="registrationFormGroup.get('email')?.hasError('required')">
                Email is Required
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <label>Password</label>
        <input class="form-control" type="text"  formControlName="password">
        <div class="error-msg" *ngIf="registrationFormGroup.get('password')?.touched">
            <div class="email-error" *ngIf="registrationFormGroup.get('password')?.hasError('maxlength')">
                Password should not exceed 16 characters
            </div>
            <div class="email-error" *ngIf="registrationFormGroup.get('password')?.hasError('minlength')">
                Password should be atleast of 8 characters
            </div>
            <div class="required" *ngIf="registrationFormGroup.get('password')?.hasError('required')">
                Password is Required
            </div>
        </div>
    </div>
    <div class="col-md-12" formArrayName="alternativeEmails">
        <button class="btn btn-primary mb-3" [disabled]="alternativeEmails.controls.length==3" (click)="addAlternativeEmails()"><i class="bi bi-plus"></i>Add
            Alternative Emails</button>
        <div class="row">
            <div class="alter-emails col-md-4 mb-3"
                *ngFor="let alternativeEmail of alternativeEmails.controls; let index= index;">
                <input class="form-control" type="text" placeholder="Enter an Alternative email"
                    [formControl]="getalternativeEmail(index)">
                <div class="error-msg" *ngIf="alternativeEmail?.touched">
                    <div class="email-error" *ngIf="alternativeEmail?.hasError('email')">
                        Enter a valid Email
                    </div>
                    <div class="required" *ngIf="alternativeEmail?.hasError('required')">
                        Email is Required
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <button class="btn btn-success" (click)="registerMe()" [disabled]="!registrationFormGroup.valid">Sign me up</button>
    </div>
</div>